本文上篇：《掌握動效設計！讓你的設計富有未來科技感（上）》

基于情景的消隱

這是iOS上的Chrome，有著基于情景的消隱動效。

當向下滾動時，導航控件自動消隱。用戶向上滾動時，導航控件出現(xiàn)。優(yōu)設哥發(fā)現(xiàn)這一點上，騰訊網(wǎng)的新聞詳情頁已經(jīng)采用了。案例圍觀地址（上下滾動鼠標滑輪，注意頁面頂部導航的變化）：http://news.qq.com/a/20131104/001730.htm 。這種方法既能提高瀏覽體驗、也拓展了有限的瀏覽空間。這對于空間限制較大的移動設備來說，尤為重要。

用戶會快速掃描內(nèi)容，略過不感興趣的內(nèi)容。當用戶停止快速瀏覽時，說明上面或者當前有用戶感興趣的內(nèi)容，為了便于導航，導航控件再次出現(xiàn)。這是一種動態(tài)的界面。

注意： 基于情景的消隱，目的在于提高用戶的注意力以及節(jié)省屏幕空間。

拉動刷新

可能這則動效大家最為熟悉，也就是下拉刷新。通過該動效，用戶可以刷新最新內(nèi)容。下圖是Twitter的應用，看看是怎樣利用這個動效刷新信息流的。

為什么這種動效效果如此好？因為下拉刷新是有依據(jù)的，首先，桌面時代，用戶就喜歡按刷新鍵來載入新內(nèi)容。其次用戶渴望把舊內(nèi)容向下拉開，這樣就給更多的新內(nèi)容騰出了地方。所以下拉和刷新結合了起來。

注意： 在設計中，將用戶的習慣/預期與行為結合，能打造無縫的體驗。

可接受的轉(zhuǎn)換

可接受性的概念來自認知學理論，主要面向引導用戶這一問題。
用戶界面需要一種可接受性——軟件界面能夠自然、合乎用戶情理的完成轉(zhuǎn)換。

我們可在iOS的照相應用中發(fā)展這種UX理論。

比如說解鎖漣漪效果，便說明操作有效。這給用戶以提示，用戶便能接受下一步的轉(zhuǎn)換。然而在iOS7中，蘋果移除了這一特性，因為用戶已經(jīng)全盤習慣、熟知了這種操作，用戶已經(jīng)適應了這種轉(zhuǎn)換，因此動效作為"引導"已經(jīng)沒有存在的必要。我想這大概就是扁平取代擬物的原因——之前iOS的擬物隱喻眾人熟知，已無引導用戶的必要。但是還是要贊一下曾經(jīng)的漣漪效果，用戶引導效果非常棒。推薦閱讀《全世界都被拍扁！你應如何理性對待扁平化設計》

注意: 賦予元素高可接受性，能為用戶指明操作方法。

焦點轉(zhuǎn)換動效

一周前，Nikita Vasilyev，這位多倫多的UI設計師提出了一個理念。寫了一個腳本，賦予焦點元素動效。仍處于試驗中，但是非常有趣，感興趣的可以自行youtube這位仁兄的實驗。

當使用鍵盤進行導航時，用戶按Tab往往無法很好的掌握"自己在頁面中的所處"，這種動效設計會賦予焦點動效，能夠讓轉(zhuǎn)換更清晰，讓用戶更能明白自己所處的元素位置

這個腳本的地址：http://n12v.com/focus-transition/

注意：引導用戶，無論用戶以何種方式導航，都能一清二楚。

結論

本文例舉的事例不是很多。目的并不是為了展示最新的交互技術，而是要突出一點：一切交互技術的更新、變革，目的都是為了更好的用戶體驗。以提高用戶體驗為出發(fā)點，你的設計會更棒。

我們不能固步自封，應該保持探索和實驗。

最后給英文好的童鞋一點福利：http://webdesign.tutsplus.com/tutorials/ux-tutorials/implementing-the-float-label-form-pattern/ 非常不錯的動效實現(xiàn)教程。

本文上篇：《掌握動效設計！讓你的設計富有未來時尚科技感（上）》

原文地址：smashingmagazine
優(yōu)設網(wǎng)翻譯：@MartinRGB
轉(zhuǎn)摘請注明優(yōu)設網(wǎng)譯文出處，謝謝各位小編。

 
================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是一個分享網(wǎng)頁設計、無線端設計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量56萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：